<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>首页</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="My Play Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript">
	
	
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 


</script>
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel='stylesheet' type='text/css' media="all" />
<link href="${pageContext.request.contextPath}/css/dashboard.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<!--start-smoth-scrolling-->
<!-- fonts -->
</head>
<body>
	<!--利用jsp标签分离网页头部  -->
	<jsp:include page="header.jsp"></jsp:include>
	<jsp:include page="menu.jsp"></jsp:include>
	
	<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
		<div class="main-grids">
			<div class="top-grids">
				<div class="recommended-info">
					<h3>最新影片</h3>
				</div>
				<c:forEach items="${RecentVideoList}" var="rvl">
					<div class="col-md-4 resent-grid recommended-grid slider-top-grids">
						<div class="resent-grid-img recommended-grid-img">
							<a href="${pageContext.request.contextPath}/video/to_play_video/${rvl.id}"><img
								src="${pageContext.request.contextPath}/${rvl.thumbnailUrl}"
								alt="" /></a>
							<div class="time">
								<p>
									<fmt:formatDate value="${rvl.duration }" pattern="HH:mm:ss"/>
								</p>
							</div>
						</div>
						<div class="resent-grid-info recommended-grid-info">
							<h6>
								<a href="${pageContext.request.contextPath}/video/to_play_video/${rvl.id}" class="title title-info">${rvl.name }</a>
							</h6>
							<ul>
								<li><p class="author author-info">
										<a href="#" class="author">${rvl.user.nickname}</a>
									</p></li>
								<li class="right-list"><p
										class="views glyphicon glyphicon-expand">
										<span class="views-info-number">${rvl.videoClick}</span>
									</p></li>
							</ul>
						</div>
					</div>
				</c:forEach>
				<div class="clearfix"></div>
			</div>
			<div class="recommended">
				<div class="recommended-grids">
					<div class="recommended-info">
						<h3>动画片</h3>
					</div>
					<script
						src="${pageContext.request.contextPath}/js/responsiveslides.min.js"></script>
					<script>
						// You can also use "$(window).load(function() {"
						$(function() {
							// Slideshow 4
							$("#slider3")
									.responsiveSlides(
											{
												auto : true,
												pager : false,
												nav : true,
												speed : 500,
												namespace : "callbacks",
												before : function() {
													$('.events')
															.append(
																	"<li>before event fired.</li>");
												},
												after : function() {
													$('.events')
															.append(
																	"<li>after event fired.</li>");
												}
											});

						});
					</script>
					<div id="top" class="callbacks_container">
						<!-- <ul class="rslides" id="slider3">
							<li> -->
						<c:forEach items="${categoryIdList}" var="category">
							<div class="animated-grids">
								<div class="col-md-3 resent-grid recommended-grid slider-first">
									<div class="resent-grid-img recommended-grid-img">
										<a href="${pageContext.request.contextPath}/video/to_play_video/${category.id}"><img
											src="${pageContext.request.contextPath}/${category.thumbnailUrl}"
											alt="" /></a>
										<div class="time small-time slider-time">
											<p>
												<fmt:formatDate value="${category.duration }" pattern="HH:mm:ss"/>
											</p>
										</div>
										<div class="clck small-clck">
											<span class="glyphicon glyphicon-time duration_class" aria-hidden="true"></span>
										</div>
									</div>
									<div class="resent-grid-info recommended-grid-info">
										<h5>
											<a href="${pageContext.request.contextPath}/video/to_play_video/${category.id}" class="title">${category.name}</a>
										</h5>
										<div class="slid-bottom-grids">
											<div class="slid-bottom-grid">
												<p class="author author-info">
													<a href="#" class="author">${category.user.nickname}</a>
												</p>
											</div>
											<div class="slid-bottom-grid slid-bottom-right">
												<p class="views views-info">
												<p class="views glyphicon glyphicon-expand">
													<span class="views-info-number">${category.videoClick}</span>
												</p>
												</p>
											</div>
											<div class="clearfix"></div>
										</div>
									</div>
								</div>
						</c:forEach>
						<!-- 		</li>
						</ul> -->
					</div>
				</div>
			</div>
			<div class="recommended">
				<div class="recommended-grids">
					<div class="recommended-info">
						<h3>推荐</h3>
					</div>
					<c:forEach items="${chargeList}" var="charge">
						<div class="col-md-3 resent-grid recommended-grid">
							<div class="resent-grid-img recommended-grid-img">
								<a href="${pageContext.request.contextPath}/video/to_play_video/${charge.id}"><img
									src="${pageContext.request.contextPath}/${charge.thumbnailUrl}"
									alt="" /></a>
								<div class="time small-time slider-time">
									<p>
										<fmt:formatDate value="${charge.duration }" pattern="HH:mm:ss"/>
									</p>
								</div>
								<div class="clck small-clck">
									<span class="glyphicon glyphicon-time duration_class" aria-hidden="true"></span>
								</div>
							</div>
							<div
								class="resent-grid-info recommended-grid-info video-info-grid">
								<h5>
									<a href="${pageContext.request.contextPath}/video/to_play_video/${charge.id}" class="title">${charge.name}</a>
								</h5>
								<ul>
									<li><p class="author author-info">
											<a href="#" class="author">${charge.user.nickname }</a>
										</p></li>
									<li class="right-list"><p class="views views-info">${charge.videoClick }</p></li>
								</ul>
							</div>
						</div>
					</c:forEach>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="recommended">
				<div class="recommended-grids">
					<div class="recommended-info">
						<h3>体育</h3>
					</div>
					<c:forEach items="${categoryList}" var="PE">
						<div class="col-md-3 resent-grid recommended-grid">
							<div class="resent-grid-img recommended-grid-img">
								<a href="${pageContext.request.contextPath}/video/to_play_video/${PE.id}"><img
									src="${pageContext.request.contextPath}/${PE.thumbnailUrl}"
									alt="" /></a>
								<div class="time small-time slider-time">
									<p>
										<fmt:formatDate value="${PE.duration }" pattern="HH:mm:ss"/>
									</p>
								</div>
								<div class="clck small-clck">
									<span class="glyphicon glyphicon-time duration_class" aria-hidden="true"></span>
								</div>
							</div>
							<div
								class="resent-grid-info recommended-grid-info video-info-grid">
								<h5>
									<a href="${pageContext.request.contextPath}/video/to_play_video/${PE.id}" class="title">${PE.name}</a>
								</h5>
								<ul>
									<li><p class="author author-info">
											<a href="#" class="author">${PE.user.nickname }</a>
										</p></li>
									<li class="right-list"><p class="views views-info">${PE.videoClick }</p></li>
								</ul>
							</div>
						</div>
					</c:forEach>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<!--利用jsp标签实现网页底部  -->
		<jsp:include page="footer.jsp"></jsp:include>
	</div>
</body>
</html>